<template>
    <div>
        <el-card shadow="never">
            <template slot="header">
                <span>商品</span>
            </template>
            <Search :search-options="searchOptions" @search="handleSearch">
                <template slot="extra-buttons">
                    <el-button type="primary" v-auth="'add'" @click="add">添加商品</el-button>
                    <el-button type="primary" v-auth="'add'" @click="batchHandle">批量操作</el-button>

                </template>
                <template #customSelectSlot="{ form }">
                    <el-select v-model="merchant_id" @change="merchantChange" placeholder="请选择" style="width: 180px">
                        <el-option v-for="item in merchant_options" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </template>
                <template #customSelectCategory="{ form }">
                    <el-select v-model="form.category_id" placeholder="请选择" style="width: 180px">
                        <el-option v-for="item in categoryList" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </template>
            </Search>
            <el-table v-loading="listLoading" element-loading-text="数据正在加载中" :data="data" border fit
                highlight-current-row style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column v-for="item in columns" :key="item.prop" :label="item.label" :prop="item.prop"
                    :align="item.align">
                    <template slot-scope="{ row }">
                        <el-image v-if="item.prop === 'main_image'" style="width: 100px; height: 100px"
                            :src="row.main_image" :preview-src-list="[row.main_image]">
                        </el-image>

                        <el-image v-else-if="item.prop === 'images_array'" style="width: 100px; height: 100px"
                            :src="row.images_array[0]" :preview-src-list="row.images_array">
                        </el-image>
                        <div v-else-if="item.prop === 'is_discount'">
                            <el-tag :type="row.is_discount == 1 ? 'success' : 'danger'">{{ row.is_discount == 1 ? '优惠商品'
                                : '原价商品'
                                }}</el-tag>
                        </div>
                        <div v-else-if="item.prop === 'is_flash_sale'">
                            <el-tag :type="row.is_flash_sale == 1 ? 'success' : 'danger'">{{ row.is_flash_sale == 1 ?
                                '限时折扣' : '原价商品'
                                }}</el-tag>
                        </div>
                        <div v-else-if="item.prop === 'status'">
                            <el-tag :type="row.status == 1 ? 'success' : 'danger'">{{ row.status == 1 ? '再售' : '下架'
                                }}</el-tag>
                        </div>
                        <div v-else>
                            {{ row[item.prop] }}
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="160" align="center">
                    <template slot-scope="{ row }">
                        <el-button type="primary" size="mini" @click="handleEdit(row)" v-auth="'edit'">
                            编辑
                        </el-button>
                        <el-button type="danger" size="mini" @click="handleDel(row)" v-auth="'del'">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Pagination :page="page" :page_size="page_size" :total="total" @sizeChange="sizeChange"
                @currentChange="pageChange" />
        </el-card>
        <el-dialog title="批量操作" :visible.sync="showBatch" width="30%" :close-on-click-modal="false">
            <el-radio v-model="status" :label="1">上架</el-radio>
            <el-radio v-model="status" :label="0">下架</el-radio>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showBatch = false">取 消</el-button>
                <el-button type="primary" @click="submitBatch">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Search from '@/components/Search.vue';
import Pagination from '@/components/Pagination.vue';
import { SEARCH_OPTIONS, columns } from './options';
import { merchantDelete, merchantList, goodsList, goodsCategoryList, goodsDel, batchChangeStatus } from '../api';
import { IMG_URL } from '@/utils/utils';
export default {
    data() {
        return {
            IMG_URL: IMG_URL,
            searchOptions: SEARCH_OPTIONS,
            columns: columns,
            listLoading: false,
            data: [],
            page: 1,
            total: 0,
            page_size: 10,
            merchant_options: [],
            categoryList: [],
            merchant_id: null,
            searchParmas: {},
            ids: [],
            showBatch: false,
            status: 1
        }
    },
    components: { Search, Pagination },
    created() {

        merchantList({ page: 1, page_size: 9999 }).then(res => {
            const id = res.data[0]?.id;
            this.merchant_id = id;
            this.merchant_options = res.data.map(i => ({
                label: i.name,
                value: i.id
            }))
            this.initCategoryList(id);
            this.init();
        })
    },
    methods: {
        merchantChange(e) {
            this.merchant_id = e;
            this.initCategoryList(e);
            this.pageChange(1);
        },
        initCategoryList(id) {
            goodsCategoryList({ page: 1, page_size: 9999, merchant_id: id }).then(r => {
                const arr = r.data || r.list;
                this.categoryList = arr.map(i => ({
                    label: i.name,
                    value: i.id
                }))
            })
        },
        init() {
            const p = {
                page: this.page,
                page_size: this.page_size,
                ...this.searchParmas,
                merchant_id: this.merchant_id
            }
            goodsList(p).then(res => {
                this.total = res.total;
                const arr = res.data || res.list;
                this.data = arr.map(i => ({
                    ...i,
                    main_image: IMG_URL + i.main_image,
                    images_array: i.images_array.map(j => IMG_URL + j)
                }));
            })
        },
        handleSearch(params) {
            this.searchParmas = { ...params, };
            // 执行搜索操作
            this.page = 1;
            this.init();
        },
        handleSelectionChange(val) {
            this.ids = val.map(i => i.id);
        },
        batchHandle() {

            if (this.ids.length > 0) {
                this.showBatch = true;
            } else {
                this.$message({
                    type: 'error',
                    message: '请选择商品'
                })
            }
        },
        submitBatch() {
            console.log(this.ids, this.status);
            batchChangeStatus({ ids: this.ids, status: this.status }).then(res=>{
                this.$message({
                    type: 'success',
                    message: '操作成功'
                })
                this.showBatch = false;
                this.pageChange(1);
            }).catch(()=>{

            })
        },
        add() {
            // this.$router.push('/goods/add?id=' + this.merchant_id);
            this.$router.push({ path: '/goods/add', query: { id: this.merchant_id } })
        },
        handleEdit(data) {
            this.$router.push({ path: '/goods/add', query: { id: this.merchant_id, currentItemId: data.id } })
        },
        handleDel(data) {
            this.$confirm('确认删除该商品?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.listLoading = true;
                goodsDel({ ids: data.id }).then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    this.pageChange(1);
                }).finally(() => {
                    this.listLoading = false;
                })
            }).catch(() => { })
        },
        pageChange(page) {
            this.page = page;
            this.init();
        },
        sizeChange(size) {
            this.page_size = size;
            this.page = 1;
            this.init();
        },
    },
}
</script>

<style lang='scss' scoped></style>